<template>
  <div class="home">
    <div class="home_right">
      <h2 class="home_right_title">
        mongoDB {{ isDetail ? "查看详情" : "新增数据" }}
      </h2>
      <div class="home_right_add">
        <div class="home_right_form">
          <div class="home_right_form_goback">
            <el-button size="small" @click="$router.go(-1)">返回</el-button>
          </div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <!--标题  -->
            <el-form-item label="标题" prop="title">
              <el-input
                v-model="ruleForm.title"
                maxlength="20"
                show-word-limit
                class="home_right_form_title"
                :disabled="isDetail"
              ></el-input>
            </el-form-item>
            <!--图片路径  -->
            <el-form-item label="图片路径" prop="image">
              <el-input
                v-model="ruleForm.image"
                show-word-limit
                class="home_right_form_image"
                :disabled="isDetail"
              ></el-input>
            </el-form-item>
            <!-- 简述 -->
            <el-form-item label="简述" prop="message">
              <el-input
                v-model="ruleForm.message"
                maxlength="40"
                show-word-limit
                class="home_right_form_message"
                :disabled="isDetail"
              ></el-input>
            </el-form-item>
            <!-- 详细内容 -->
            <el-form-item label="详细内容" prop="content">
              <el-input
                type="textarea"
                rows="6"
                maxlength="500"
                show-word-limit
                v-model="ruleForm.content"
                :disabled="isDetail"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="home_form_submit">
            <el-button
              size="small"
              @click="submit('ruleForm')"
              :disabled="isDetail"
              >提交</el-button
            >
            <el-button
              size="small"
              @click="reStar('ruleForm')"
              :disabled="isDetail"
              >重置</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* 接收 title 辩题 message 简述  content 详细内容  createTime 创建时间 _id数据_id */
import { addData, showDetail, upData } from "../api/api_type.js";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      ruleForm: {
        title: "",
        message: "",
        content: "",
        image: "",
        isDetail: false,
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        message: [
          { required: true, message: "请输入简述", trigger: "blur" },
          {
            max: 40,
            min: 3,
            message: "输入区间为3 - 40个字符",
            trigger: "blur",
          },
        ],
        content: [
          { required: true, message: "请输入详细内容", trigger: "blur" },
          {
            max: 500,
            min: 3,
            message: "输入区间为3 - 500个字符",
            trigger: "blur",
          },
        ],
        image: [{ required: true, message: "请输入图片路径", trigger: "blur" }],
      },
    };
  },
  methods: {
    /* 重置 */
    reStar() {
      const _id = this.ruleForm._id;
      this.ruleForm = {
        title: "",
        message: "",
        content: "",
        image: "",
        _id,
      };
    },
    /* 提交 */
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let ruleForm = {
            ...this.ruleForm,
          };
          delete ruleForm.isDetail;
          const api = ruleForm._id ? upData : addData;
          api(ruleForm).then((res) => {
            var resp = res.data,
              type;
            if (resp.code == 200) {
              type = "success";
            } else {
              type = "error";
            }
            this.$message({
              message: resp.msg,
              type,
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  created() {
    var params = this.$route.params;
    this.isDetail = params.isDetail || false;
    if (params.isDetail || params.upData) {
      /* 查看详情执行 */
      showDetail({ id: params.id }).then((res) => {
        var resp = res.data;
        if (resp.code == 200) {
          this.ruleForm = resp.data;
        }
      });
    }
  },
};
</script>
<style lang="scss">
.home {
  width: 100%;
  height: 100vh;
  display: flex;
  background: rgb(245, 244, 244);
  .home_left {
    width: 20%;
    height: 100%;
    background: pink;
  }
  .home_right {
    flex: 1;
    overflow: hidden;
    .home_right_title {
      width: 95%;
      margin: 0 auto;
      padding: 15px 0;
      text-align: center;
      border-radius: 5px;
      background: white;
      margin-top: 20px;
    }
    .home_right_add {
      width: 95%;
      margin: 0 auto;
      min-height: 200px;
      border-radius: 5px;
      background: white;
      margin-top: 20px;
      overflow: hidden;
      .home_right_form {
        width: 90%;
        margin-top: 15px;
        .home_right_form_goback {
          width: 95%;
          margin: 0 auto;
          padding: 10px 0;
        }
        .home_right_form_title {
          width: 300px;
        }
        .home_form_submit {
          width: 20%;
          margin: 0 auto;
          margin-bottom: 20px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .el-button {
            width: 200px;
          }
        }
      }
    }
  }
}
</style>